<template>
  <div class="allocation">
    <el-tabs>
      <el-button class="but" type="danger" @click="add()">新增</el-button>
      <el-table :data="list" style="width: 100%">
        <el-table-column fixed prop="id" label="ID" width="230">
        </el-table-column>
        <el-table-column prop="tag" label="标签" width="230"> </el-table-column>
        <el-table-column prop="sort" label="排序" width="230">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="500"
        >
          <template v-slot="{ row }">
            <el-tag
              :type="row.status == '1' ? 'success' : 'info'"
              disable-transitions
            >
              {{ formatEmploy(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="230">
          <template v-slot="{ row }">
            <el-button type="text" size="small" @click="hEdit(row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="open(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="liyongxin"
        :current-page.sync="q.page"
        :page-sizes="[10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total='total'
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-tabs>

    <!-- 添加弹框 -->
    <el-dialog
      title="新增"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showDialog"
     
      width="25%"
    >
      <el-form ref="Form" :model="Form" :rules="rules" label-width="100px">
        <el-form-item label="标签" prop="name">
          <el-input v-model="Form.tag" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="Form.sort" />
        </el-form-item>
        <el-form-item class="display" label="是否显示">
         <el-radio-group v-model="roleForm.status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="hClosed">取消</el-button>
          <el-button size="small" type="primary" @click="hSubmit"
            >确定</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 编辑确定 -->
    <el-dialog
      title="编辑"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="Dialog"
     
      width="25%"
    >
      <el-form
        ref="roleForm"
        :model="roleForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="标签" prop="name">
          <el-input v-model="roleForm.tag" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="roleForm.sort" />
        </el-form-item>
        <el-form-item class="display" label="是否显示">
          <el-radio-group v-model="roleForm.status">
          <el-radio :label="1" >是</el-radio>
          <el-radio :label="2" >否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="Dialog = false">取消</el-button>
          <el-button size="small" type="primary" @click="Submit"
            >确定</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { hotsearch, hotdelete, hotadd, hotamend } from "@/api/login";
import employeesConst from "@/constant/employees";
const hiretaxtMap = {};
employeesConst.hiretaxt.forEach((item) => {
  hiretaxtMap[item.status] = item.value;
});

export default {
  data() {
    return {
      list: [],
      total:0,
      q: {
        page: 1,
        size: 10,
      },

      showDialog: false,
      Dialog: false,
      roleForm: {
        tag: "",
        sort: "",
        status: "",
      },
      Form: {
        tag: "",
        sort: "",
        status:''
      },

      rules: {
        tag: [{ required: true, message: "标签名称不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.loadRoles();
  },
  methods: {
    async loadRoles() {
      const res = await hotsearch(this.q);
      this.total = res.data.count-0

      this.list = res.data.data;
      console.log(this.list);
    },

    // 分页
    handleCurrentChange(page) {
      this.q.page = page;
      this.loadRoles();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loadRoles();
    },
    // 状态
    filterTag(value, row) {
      return row.status === value;
    },
    // 编辑确定
    async Submit() {
      const res = await hotamend(this.roleForm);
      // console.log(res);
      this.$message.success(res.msg);
      this.Dialog = false;
      this.loadRoles();
    },
    // 确定
    async hSubmit() {
      const res = await hotadd(this.Form);
      console.log('789',res);
      this.$message.success(res.msg);
      this.Form.tag = '',
      this.Form.sort = ''
      this.Form.status = ''
      this.showDialog = false;
      this.loadRoles();
    },
    // 编辑
    hEdit(row) {
      // 设置状态
      this.isEdit = true;
      // console.log(row)
      // 显示 dialog
      this.Dialog = true;
      // 数据回填
      // 对象深拷贝
      this.roleForm = { ...row };
      
    },
    // 取消
    hClosed() {
       this.Form.tag = '',
      this.Form.sort = ''
      this.Form.status = ''
      this.showDialog = false
    //   this.list = {
    //     tag: "",
    //     description: "",
    //   };
    //   // 移除表单项的校验结果
    //   this.$refs.roleForm.clearValidate();
    //   this.$refs.Form.clearValidate()
    },
    // 删除
    open(id) {
      this.$confirm("你确定要删除吗？")
        .then(() => {
          this.doDel(id);
        })
        .catch(() => {});
    },
    async doDel(id) {
      const res = await hotdelete(id);

      this.$message.success(res.msg);

      this.loadRoles();
    },
    // 新增
    add() {
      this.showDialog = true;
    },
    // 显示隐藏
    formatEmploy(code) {
      return hiretaxtMap[code];
    },
  },
};
</script>

<style scoped>
.allocation {
  background-color: #fff;
  padding: 0 10px;
}

.el-table__header {
  line-height: 2;
}

.cell {
  text-align: center;
}

.but {
  float: left;
  margin: 10px 0;
  background-color: #ff7144;
}

.el-dialog__footer,
.el-dialog__body,
.el-dialog__header {
  position: relative;
  padding: 0 0 0 10px !important;
  line-height: 60px;
  margin: 0 !important;
}
.el-input {
  width: 70%;
  position: absolute;
  left: 0;
}

.display {
  width: 250px !important;
}
.dialog-footer {
  margin-right: 20px;
}
.el-col {
  width: 50%;
}
.el-button--text {
  color: #ff7144;
}
</style>
